<template>
  <div class="loginphone-page">
    <div class="headerBox">
      <van-nav-bar title="注册" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="input_box">
      <div class="samll_box">
        <i class="icon user"></i>
        <input
          type="text"
          v-model="username"
          placeholder="请输入用户名（2-8位的用户名）"
          placeholder-style="color:#D6D5D5"
        />
      </div>
      <div class="samll_box">
        <i class="icon iphone"></i>
        <input
          type="text"
          v-model="iphone"
          placeholder="请输入手机号"
          placeholder-style="color:#D6D5D5"
        />   
      </div>
      <div class="samll_box">
        <i class="icon yan"></i>
        <input
          type="text"
          v-model="code"
          placeholder="请输入验证码"
          placeholder-style="color:#D6D5D5"
        />
        <span class="hy_code" v-if="timer == 0" @click="codeFunc">发送验证码</span>
        <span class="hy_code" v-else>{{ timer + "s" }}</span>
      </div>
      <div class="samll_box">
        <i class="icon id"></i>
        <input
          type="text"
          v-model="recomNo"
          placeholder="请输入邀请码"
          placeholder-style="color:#D6D5D5"
        />
      </div>
      <div class="samll_box">
        <i class="icon pass"></i>
        <input
          type="password"
          v-model="pass"
          placeholder="请输入密码（为6-16位数字、字母组成）"
          placeholder-style="color:#D6D5D5"
        />
      </div>
      <div class="samll_box">
        <i class="icon pass"></i>
        <input
          type="password"
          v-model="passTwo"
          placeholder="请输入确认密码"
          placeholder-style="color:#D6D5D5"
        />
      </div>
      <div class="xz">
        <i class="icon icon_no" v-if="!xzType" @click="xzType=true"></i>
        <i class="icon" v-else @click="xzType=false"></i>
        <span style="font-size:.29rem;color:#00c8e7" @click="goRotocol">我已仔细阅读并同意《服务与隐私条款》</span>
      </div>
      <div class="footer">
        <span class="sub" @click="submit">提交</span>
      </div>
    </div>
    <div v-if="isDownload" class="tiao"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: false,
      xzType: true,
      username: "",
      iphone: "",
      code: "",
      recomNo: '',
      pass: "",
      passTwo: "",
      timer: 0,
      timerInter: null,
      isDownload: false,
    };
  },
  created() {
    this.recomNo = this.$route.query.recomNo
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.indexOf('micromessenger') != -1;
    if (isWeixin) {
      this.isDownload = true
    }else{
      this.isDownload = false 
  　}
  },
  methods: {
    goRotocol() {
      this.$router.push({name: 'rotocol'})
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    userNameTest() {
      if (!this.iphone) {
        this.$toast("请输入手机号");
        return false;
      } else if (!(/^1[3456789]\d{9}$/.test(this.iphone))) {
        this.$toast("请输入正确手机号");
        return false
      } else {
        return true
      }
    },
    userName() {
      if (!this.username) {
        this.$toast("请输入用户名");
        return false;
      } else if(this.username.length<2 || this.username.length> 8) {
        this.$toast("请输入2-8位的用户名");
        return false;
      }else {
        return true;
      }
    },
    //  获取验证码
    async codeFunc() {
      if (!this.userName()) { return false }
      if (!this.userNameTest()) { return false }
      let self = this
      let resuser = await this.$http.checkUsername({
        username: self.username
      })
      if(resuser) {
        let res = await this.$http.sendMaseeage({
          tel: self.iphone
        })
        if (res) {
          this.$toast("验证码已发送")
          self.timer = 60
          self.timerInter = setInterval(() => {
            self.timer--
            if (self.timer === 0) {
              clearInterval(self.timerInter)
            }
          }, 1000)
        } else {
          self.timer = 0
        }
      }
    },
    async submit() {
      let self= this
      if (!this.userName()) { return false }
      if (!this.userNameTest()) { return false }
      if (!this.code) {
        this.$toast("请输入验证码")
        return false
      } else if (!this.pass) {
        this.$toast("请输入新密码")
        return false
      } else if (!(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.pass))){
        this.$toast("请输入6-16位并包含数组和字母的密码")
        return false
      }else if (!this.passTwo) {
        this.$toast("请输入确认密码")
        return false
      } else if (this.passTwo != this.pass) {
        this.$toast("新密码与确认密码不一致")
        return false
      } else if (!this.xzType) {
        this.$toast("请勾选服务与隐私条款协议")
        return false
      }
      let res = await this.$http.appUserRegisterForUser({
        tel: self.iphone,
        code: self.code,
        username: self.username,
        orgpass: self.pass,
        recomNo: self.recomNo
      })
      if (res) {
        if(this.$route.query.recomNo) {
          this.$toast("注册成功,即将跳转到下载页面")
          setTimeout(()=>{
            this.$router.push({name: 'download'})
          },2000)
        } else {
          this.$toast("注册成功，即将跳转到登录页面")
          setTimeout(()=>{
            this.$router.push({name: 'login'})
          },2000)
        }
      }
    },
  },
};
</script>
<style>
.tiao{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url('../../assets/img/liulanqi.png')no-repeat;
  background-size: cover;
  z-index: 1;
}
.loginphone-page .van-nav-bar{
  background-color: rgb(250,250,250,.0);
}
.loginphone-page .van-nav-bar .van-nav-bar__title{
  color: #fff;
}
.loginphone-page .van-nav-bar .van-icon{
  color: #fff !important;
}
.loginphone-page .van-hairline--bottom::after{
  border: none;
}
</style>
<style scoped>
.headerBox{
  background: transparent;
}
.loginphone-page {
  background-image: url('../../assets/img/login/zhuce.png');
  background-repeat:no-repeat ;
  background-color:#222 ;
  background-size: cover;
  min-height: 100vh;
}
.input_box {
  padding: .5rem;
}
.samll_box {
  height: 1rem;
    /* line-height: 1rem; */
  padding-top: .1rem;
  border-bottom: 0.02rem solid rgb(250,250,250,.14);
  margin-bottom: 0.2rem;
  position: relative;
}
.samll_box > input {
  height: 100%;
  width: 5rem;
  border: none;
  font-size: 0.35rem;
  background: none;
  color: #fff;
}
.icon,
.clear {
  display: inline-block;
  width: 0.48rem;
  height: 0.48rem;
  position: relative;
  top: 0.1rem;
  margin-right: 0.2rem;
}
.user {
  background: url("../../assets/img/login/icon_geren_1.png") no-repeat;
  background-size: 100% 100%;
}
.pass {
  background: url("../../assets/img/login/icon_mima_1.png") no-repeat;
  background-size: 100% 100%;
}
/* .clear {
  background: url("../../assets/img/login/icon_shanch_1.png") no-repeat;
  background-size: 100% 100%;
} */
.iphone {
  background: url("../../assets/img/login/icon_dianhua_1.png") no-repeat;
  background-size: 100% 100%;
}
.yan {
  background: url("../../assets/img/login/icon_yanzheng_1.png") no-repeat;
  background-size: 100% 100%;
}
.id {
  background: url("../../assets/img/login/icon_ID_1.png") no-repeat;
  background-size: 100% 100%;
}
.hy_code {
  display: inline-block;
  position: absolute;
  width: 1.88rem;
  height: 0.61rem;
  text-align: center;
  line-height: 0.61rem;
  color: #00c8e7;
  border-radius: 0.3rem;
  border: 0.02rem solid #00c8e7;
  top: 0.1rem;
  right: 0;
}
.xz .icon{
  width: .4rem;
  height: .4rem;
  display: inline-block;
  background: url('../../assets/img/login/icon_xuana.png') no-repeat;
  background-size: 100% 100%;
}
.xz .icon_no{
  background: url('../../assets/img/login/icon_weixuana.png') no-repeat;
  background-size: 100% 100%;
}
.forget {
  float: right;
  font-size: 0.29rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
}
.footer {
  width: 100%;
  /* position: fixed;
  padding: 0 0.5rem;
  bottom: 1.2rem; */
  margin-top: 1.5rem;
}
.footer > span {
  width: 100%;
  display: inline-block;
  height: 0.94rem;
  background: #00c8e7;
  line-height: 0.94rem;
  text-align: center;
  color: #fff;
  border-radius: 0.47rem;
  font-size: 0.34rem;
  opacity: 0.4;
}
.footer span.sub {
  opacity: 1;
}
</style>
